<!-- /ds/garage/add -->
<template>
  <div class="page">
    <!-- 查询 -->
    <el-form :inline="true">
      <el-form-item>
        <el-button icon="el-icon-plus" type="primary" @click="addNew"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="备注说明" prop="content"></el-table-column>
      <el-table-column label="用户ID" prop="uid"></el-table-column>
      <el-table-column label="总赠送积分" prop="allmoney"></el-table-column>
      <el-table-column label="剩余未释放" prop="shengmoney"></el-table-column>
      <el-table-column label="已释放" prop="maxmoney"></el-table-column>
      <el-table-column label="创建日期" prop="addDate"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="handlePageChange"
      :current-page="query.pageNum"
      :page-size="query.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 新增表单 -->
    <el-dialog title="新增车房纪录" :visible.sync="formShow" append-to-body>
      <el-form label-width="100px">
        <el-form-item label="用户ID">
          <el-input v-model="form.uid" placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input
            v-model="form.content"
            placeholder="请输入备注说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="总赠送积分">
          <el-input
            v-model.number="form.allmoney"
            placeholder="请输入总赠送积分"
          ></el-input>
        </el-form-item>
        <el-form-item label="剩余未释放">
          <el-input
            v-model.number="form.shengmoney"
            placeholder="请输入剩余未释放"
          ></el-input>
        </el-form-item>
        <el-form-item label="已释放">
          <el-input
            :value="form.maxmoney"
            placeholder="请输入已释放"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { garageList, garageAdd } from "@/api/ds/garage";

export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      formShow: false,
      form: {
        maxmoney: 0,
        shengmoney: 0,
        allmoney: 0,
        uid: "",
        content: "",
      },
    };
  },
  computed: {
    maxmoney() {
      return this.form.allmoney - this.form.shengmoney;
    },
  },
  watch: {
    maxmoney(newValue) {
      this.form.maxmoney = newValue;
    },
  },
  created() {
    this.getData();
  },
  methods: {
    addNew() {
      this.formShow = true;
    },

    handlePageChange(page) {
      this.query.pageNum = page;
      this.getData();
    },

    async getData() {
      let res = await garageList(this.query);
      if (res.code === 200) {
        console.log(res);

        this.list = res.rows;
        this.total = res.total;
      }
    },

    async submit() {
      let res = await garageAdd(this.form);
      if (res.code === 200) {
        console.log(res);
        this.getData();
        this.formShow = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 20px;
}
</style>
